<template>
<!--  <div v-for="i in customerlist.data[0].num_list" :key="i">-->
<!--    获取积分渲染信息-->
<!--    {{i}}-->

<!--  </div>-->
  <div id="show_one" style="width: 500px;height: 500px">

  </div>
  <div>
    {{add_lists}}
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {reactive} from 'vue'

export default {
  name: "get_gift_list",
  setup() {
    let customerlist = reactive({'data': []})
    // console.log(customerlist)
    var socket = new WebSocket("ws:127.0.0.1:8000/webs/");

    socket.onopen = function () {
      console.log('成功');//成功连接上Websocket

    };
    // 获取数据
    socket.onmessage = function (e) {

      customerlist.data = JSON.parse(e.data)
      this.num_list=customerlist.data[0].num_list
      this.add_list=customerlist.data[0].add_list
      console.log(this.num_list)
      if (customerlist.data){
        var show_one = document.getElementById('show_one');
        var myChart = echarts.init(show_one);
        var option;

        option = {
          xAxis: {
            type: 'category',
            data: this.add_list
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: this.num_list,
              type: 'bar'
            }
          ]
        };

        option && myChart.setOption(option);
      }
    };

    socket.onclose = function () {
      console.log('关闭连接');
      socket.close(); //关闭TCP连接
    };
    //连接发生错误的回调方法
    socket.onerror = function () {
      console.log("WebSocket连接发生错误");
    }

    return {
      customerlist,
      socket
    }
  },
  data() {
    return {
      num_list: [],
      add_list: [],


    }
  },
  methods: {
    // 实例化图形

    get_gift() {
      this.myaxios('http://localhost:8000/get_zhuzhuangtu', 'get', {'userid': localStorage.getItem('userid')})
          .then(res => {
            console.log(res)
            this.num_list = res.data.num_list
            this.add_list = res.data.add_list
          })
    }
  },
  mounted() {
    this.get_gift()

  }
}
</script>

<style scoped>

</style>
